<template>
	<div class="container" @click="handleGallaryClick">
		<div class="wrapper">
			<swiper :options="swiperOption" >
		    <swiper-slide v-for="(item,index) in imgs" :key="index">
		    	<img class="gallary-img" :src="item"/>
		    </swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
	    </swiper>
		</div>
	</div>
</template>

<script>
	export default{
		name: 'commonGallery',
		props: {
			imgs: {
					type:Array,
					default () {
						return []
					}
				}
		},
		data () {
			return {
				swiperOption:{
					pagination:'.swiper-pagination',
					paginationType:'fraction',
					//只要监听到dom元素变化就刷新
					observeParents:true,
					observer:true
				}
				
			}
		},
		methods: {
			handleGallaryClick () {
				this.$emit('closeGallary')
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.container >>> .swiper-container
		overflow:inherit
	.container
		position:fixed
		top:0
		bottom:0
		left:0
		right:0
		background:#000
		display:flex
		flex-direction:column
		justify-content:center
		z-index:21
		.wrapper
			padding-top:.05rem
			.gallary-img
				width:100%
				z-index:22
			.swiper-pagination
				position:relative
				top:1rem
				color:#fff
</style>